<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <script>
        window.onload=function(){
            //子组件
            Vue.component('my-child',{
                data(){
                    return {

                    }
                },
                props:{
                   num:{
                       type:Number,
                       required:true
                   }
                },
                render(createElement){
                    //createElement是一个函数
                    //参数：标签名称，属性对象，子元素数组
                    return createElement('h'+this.num,{
                        //将绑定给当前元素的所有属性写在对象中
                        style:{
                            color:'blue',

                        }
                    },['default--',this.$slots.default])
                }
                /*template:`
                    <div>
                        <h1 v-if='num==1'>
                            <slot></slot>
                        </h1>
                        <h2 v-else-if='num==2'>
                            <slot></slot>
                        </h2>
                        <h3 v-else-if='num==3'>
                            <slot></slot>
                        </h3>
                        <h4 v-else-if='num==4'>
                            <slot></slot>
                        </h4>
                        <h5 v-else-if='num==5'>
                            <slot></slot>
                        </h5>
                        <h6 v-else>
                            <slot></slot>
                        </h6>
                    </div>
                `*/
            })
            var app=new Vue({
                el:'#app',
                data:{
                },
                components:{//父组件
                    'my-parent':{
                        data(){
                            return {
                                num:2,
                            }
                        },
                        template:`
                            <div>
                                <h1>my-parent</h1>
                                <my-child :num='num'>hello</my-child>
                            </div>
                        `
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <my-parent></my-parent>
    </div>
</body>
</html>